<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
<meta http-equiv="pragma" content="no-cache"/>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/common/admin_templ_style.css"/>
<link rel="stylesheet" type="text/css" href="../api/css/cupertino/jquery-ui-1.10.1.custom.min.css"/>
<link rel="stylesheet" type="text/css" href="../api/css/jquery.colorpicker.css"/>
<script src="../api/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../api/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../api/js/jquery.colorpicker.js"></script>
<script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>
<style type="text/css">
    body {
        background: none;
        height: 100%;
    }

    #theme-edit-form {
        height: calc(100% -42px);
    }

    #theme-edit-form h2 {
        margin-bottom: 20px;
    }

    #theme-edit-form h3.ui-accordion-header-active {
        color: #fff;
    }

    #theme-edit-form select {
        padding-left: 0;
        white-space: nowrap;
    }

    #theme-edit-form input[type="file"] {
        width: 132px;
    }

    .theme-edit-block {
        margin-left: 10px;
        width: 21%;
    }

    .ui-accordion .theme-edit-content {
        padding: 0;
    }

    .theme-edit-content ul {
        padding: 20px 5px;
    }

    .theme-edit-content li label {
        font-size: 11px;
        padding-right: 10px;
        width: 35%;
    }

    .theme-edit-content button.ui-state-default {
        background: none;
        border: none;
    }

    .theme-edit-content span.ui-button-text {
        padding: 0;
        font-style: inherit;
    }

    .hidden-field {
        margin: 5px 0;
    }

    .hidden-field input {
        width: 60px;
    }

    .hidden-field select {
        width: 77px;
    }

    .hidden-field span.close {
        padding: 1px 5px;
        display: inline-block;
        background: #aed0ea;
        color: #fff;
        border-radius: 3px;
        margin-left: 5px;
    }

    .hidden-field span.close:hover {
        cursor: pointer;
        background: #4F7891;
    }

    form, .kpi-preview, .kpi-drill {
        border: 1px solid #9CD6E7;
        border-radius: 5px;
        box-shadow: 0 0 100px #AADCEA;
        margin: 0 auto;
        padding-bottom: 50px;
        width: 98%;
    }

        /*  new */
    .left-25 {
        float: left;
        width: calc(25%);
        height: calc(100% -10px);
    }

    .right-75 {
        float: left;
        height: 100%;
        margin-left: 20px;
        width: calc(73% + 4px);
    }

    .tab-frame label {
        margin-left: -33px;
        width: 33%;
    }

    .tab-frame label {
        width: 48%;
    }

    input[type = "text"], select, textarea {
        width: 50%;
    }

    #accordion3 div:not(:first-child) {
        padding-top: 8px;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        font-size: 12px;
        padding: 1px 1px 1px 27px;
    }

    #bi_admin_layout_editor .top-content {
        height: 100%;
    }

    #bi_admin_layout_editor .top-content {
        padding: 0 1px;
    }

    iframe {
        height: calc(100% +59px);
    }


</style>
<script type="text/javascript" src="../theme_engine/lib/jscssp/cssParser.js"></script>
<script type="text/javascript">

var ENGINE_CONFIG = {
    WIRZRD_CONIG_URL:"../mock/mydata3_empty.json",
    CSS_URL : "../admin/themes/theme01/Style.css",
    TARGET_IFRAME_URL:"theme_preview3.htm"
}


var configData = {};
var propertiesList = [];
var flatCSS = []; // Css from url


function PraseCss(cssString) {
    var parser = new CSSParser();
    var sheet = parser.parse(cssString, false, true);
    return GetCssToFlatArray(sheet.cssRules);
}

// Upadte Css in config file with new css
function BindCssFromFileIntoConfig(propertiesList, flatCSS)
{
    for(var x = 0; x < propertiesList.length; x++)
    {
        for(var y = 0; y < flatCSS.length; y++)
        {
            var selector = propertiesList[x].selectors;
            var property = propertiesList[x].css;

            if((selector === flatCSS[y].selector) &&
                    (property === flatCSS[y].property))
            {
                var value = flatCSS[y].value !== undefined ? flatCSS[y].value : "";
                propertiesList[x].value = value;
            }
        }
    }
    return propertiesList;
}

function BindCssFromPropListIntoWizard(propertiesList)
{
    for(var x = 0; x < propertiesList.length; x++)
    {
        $("#" + propertiesList[x].id).val(propertiesList[x].value);
    }
}

function ApplyCssFromFlatCssList(flatCSS)
{
    for(var x = 0; x < flatCSS.length; x++)
    {
        $( flatCSS[x].selector).css(flatCSS[x].property, flatCSS[x].value);
    }
}


/* Initalize Application*/
$(document).ready(function () {
    LoadAppFromConfigService(ENGINE_CONFIG.WIRZRD_CONIG_URL);
    $("#iframe").attr("src", ENGINE_CONFIG.TARGET_IFRAME_URL);
    $("#tabs").tabs();
    $("#tabs_preview").tabs();
    $("#div1").css("height", $(window).height() - 128);

    var spinner = $( "#spinner" ).spinner();

    LoadCssService(ENGINE_CONFIG.CSS_URL);


    $("#grey_theme").click(function() {

        ENGINE_CONFIG.CSS_URL = "../admin/themes/theme01/Style.css";
        LoadCssService3(ENGINE_CONFIG.CSS_URL);
    });

    $("#green_theme").click(function() {

        ENGINE_CONFIG.CSS_URL = "../admin/themes/theme02/Style.css";
        LoadCssService3(ENGINE_CONFIG.CSS_URL);
    });

    $("#blue_theme").click(function() {

        ENGINE_CONFIG.CSS_URL = "../admin/themes/theme03/Style.css";
        LoadCssService3(ENGINE_CONFIG.CSS_URL);
    });

    $("#yellow_theme").click(function() {

        ENGINE_CONFIG.CSS_URL = "../admin/themes/theme04/Style.css";
        LoadCssService3(ENGINE_CONFIG.CSS_URL);
    });

    $("#transparent_theme").click(function() {

        ENGINE_CONFIG.CSS_URL = "../admin/themes/theme05/Style.css";
        LoadCssService3(ENGINE_CONFIG.CSS_URL);
    });

});


/* Load wizard configuration from ENGINE_CONFIG.WIRZRD_CONIG_URL */
function LoadAppFromConfigService(url) {
    $.ajax({
        type:"GET",
        data:{
        },
        url:url,
        dataType:"json",
        contentType:"application/json; charset=utf-8",
        success:function (data) {
            //manipulate the data
            configData = data.root;
            propertiesList = GetAllProperties(configData);
            /*var accord = BuildAccordion(result);
            $(accord).appendTo("#div1");

            //CSS
            setTimeout('ApplyTheDefaultCssFromConfig(propertiesList, "#iframe")', 300);*/
        },
        error:function (error) {
            // show the error details or show a user friendly error message
            alert("Due to unexpected errors we were unable to load data");

        }
    });
}


function LoadCssService3(url) {
    $.ajax({
        type:"GET",
        data:{
        },
        url:url,
        dataType:"text",
        contentType:"application/json; charset=utf-8",
        success:function (data) {
            //manipulate the data
            var result = data;

            flatCSS = PraseCss(result);
            BindCssFromFileIntoConfig(propertiesList, flatCSS);
            BindCssFromPropListIntoWizard(propertiesList);

            //CSS
            //setTimeout('ApplyTheDefaultCssFromConfig(propertiesList, "#iframe")', 300);
            setTimeout('ApplyTheDefaultCssFromFile(flatCSS, "#iframe")', 300);

            //ApplyCssFromFlatCssList

        },
        error:function (error) {
            // show the error details or show a user friendly error message
            alert("Due to unexpected errors we were unable to load css data");

        }
    });
}


/* Load CSS */
function LoadCssService(url) {
    $.ajax({
        type:"GET",
        data:{
        },
        url:url,
        dataType:"text",
        contentType:"application/json; charset=utf-8",
        success:function (data) {
            //manipulate the data
            var result = data;

            flatCSS = PraseCss(result);
            BindCssFromFileIntoConfig(propertiesList, flatCSS);

            /*Building the Accordion */
            var accord = BuildAccordion(configData);
            $("#div1").empty();
            $(accord).appendTo("#div1");

            //CSS
        //    setTimeout('ApplyTheDefaultCssFromConfig(propertiesList, "#iframe")', 300);
              setTimeout('ApplyTheDefaultCssFromFile(flatCSS, "#iframe")', 300);

        },
        error:function (error) {
            // show the error details or show a user friendly error message
            alert("Due to unexpected errors we were unable to load css data");

        }
    });
}

// return selector, property, value
function GetCssToFlatArray(cssFilePropList) {
    var result = [];
    for(var x = 0; x < cssFilePropList.length;  x++)
    {
         if(cssFilePropList[x].type === 1)
         {
             var selector  = cssFilePropList[x].mSelectorText;
             for(var y = 0 ; y < cssFilePropList[x].declarations.length; y++)
             {
                 var property = cssFilePropList[x].declarations[y].property;
                 var valueText = cssFilePropList[x].declarations[y].valueText;

                 var obj = {'selector': selector, 'property': property, 'value':valueText};
                 result.push(obj)
             }
         }
    }
    return result;
}

/* Parse the default CSS properties from the configuration file */
function GetAllProperties(data) {
    var result = [];
    for (var x = 0; x < data.length; x++) {
        for (var y = 0; y < data[x].properties.length; y++) {
            result.push(data[x].properties[y]);
        }
    }
    return result;
}

/* Bulding Accordion */
function BuildAccordion(result) {
    var accordion = $('<div id="accordion3"></div>');
    for (var x = 0; x < result.length; x++) {
        var h3 = '<h3>' + result[x].name + '</h3>';
        $(h3).appendTo(accordion);
        var properties = "";
        var content = $('<div></div>');
        for (var y = 0; y < result[x].properties.length; y++) {
            var field = BuildAccordionField(result[x].properties[y]);
            $(field).appendTo(content);
        }
        $(content).appendTo(accordion);
    }

    $(accordion).appendTo("body");
    $(accordion).accordion({collapsible:true, heightStyle:"content", animate:200});
    return $(accordion);
}
function BuildAccordionField(obj) {
    var label = $('<label>' + obj.label + '</label>');
    var content = $('<div></div>');

    $(label).appendTo(content);
    content.append(BuildInputComponent(obj));

    return content;
}
function BuildInputComponent(obj) {
    if (obj.selectionType === "text")
        return BuildTextInput(obj);
    else if (obj.selectionType === "select")
        return BuildDropDownSelect(obj);
    return;
}
/* Build textinput for the wizard */
function BuildTextInput(obj) {
    var content = $("<input/>",
            {   id:obj.id,
                type:obj.selectionType,
                name:obj.value,
                value:obj.value,
                keyup:InputComponentChangeHandler
            });
    return content;
}
/* Build select for the wizard */
function BuildDropDownSelect(obj) {
    //obj is the list of option values
    var content = $('<select/>',
            {
                id:obj.id,
                change:InputComponentChangeHandler
            });
    for (var x = 0; x < obj.options.length; x++) {
        if (obj.options[x] === obj.value) {
            content.append(
                    $('<option selected>' + obj.options[x] + '</option>',
                            { value:obj.options[x]
                            }
                    )
            );
        }
        else {
            content.append(
                    $('<option>' + obj.options[x] + '</option>',
                            { value:obj.options[x]
                            }
                    )
            );
        }
    }

    $('select option[value="' + obj.value + '"]').attr("selected", true);
    //$('select option[value="1"]').attr("selected",true);
    return content;
}
/* Apply CSS stored in config into the preview page */
function ApplyTheDefaultCssFromConfig(propertiesList, iframeID) {
    for (var x = 0; x < propertiesList.length; x++) {
        var obj = propertiesList[x];
        if (iframeID === undefined)
            $(obj.selectors).css(obj.css, obj.value);

        else // Apply CSS on Iframe
            $(iframeID).contents().find(obj.selectors).css(obj.css, obj.value);
    }
}

function ApplyTheDefaultCssFromFile(propertiesList, iframeID) {
    for (var x = 0; x < propertiesList.length; x++) {
        var obj = propertiesList[x];
        if (iframeID === undefined)
            $(obj.selectors).css(obj.property, obj.value);

        else // Apply CSS on Iframe
            $(iframeID).contents().find(obj.selector).css(obj.property, obj.value);
    }
}

/* Input Handlers */
function InputComponentChangeHandler(e) {
    if (e.currentTarget.type === "text")
        TextInputChangeHandler(e);
    else if (e.currentTarget.type === "select-one")
        SelectInputChangeHandler(e);
}
function SelectInputChangeHandler(e) {
    var value = e.currentTarget.value;
    var id = e.currentTarget.id;

    //up key
    if (e.keyCode == '38') {

    }

    //down down
    else if (e.keyCode == '40') {

    }

    ApplyCssChanges(id, value, propertiesList, "#iframe");

}
function TextInputChangeHandler(e) {
    var value = e.currentTarget.value;
    var id = e.currentTarget.id;
    ApplyCssChanges(id, value, propertiesList, "#iframe");
}

/* Bind CSS changes from the wizard into the preview */
function ApplyCssChanges(id, newValue, propertiesList, iframeID) {
    for (var x = 0; x < propertiesList.length; x++) {
        if (id === propertiesList[x].id) {
            var obj = propertiesList[x];
            propertiesList[x].value = newValue;

            if (iframeID === undefined)
                $(obj.selectors).css(obj.css, newValue);

            else // Apply CSS on Iframe
                $(iframeID).contents().find(obj.selectors).css(obj.css, newValue);
            break;
        }
    }
}

/* Export CSS from the wizard into String */
function GetCSS(propertiesList, showEmpty) {
    var groupedCSS = GetGroupedCSSProp(propertiesList, false);
    return ExportGroupedCssPropToString(groupedCSS);
}
function GetGroupedCSSProp(propertiesList, showEmpty) {
    var result = {};
    var propListGroup = {};
    for (var x = 0; x < propertiesList.length; x++) {
        var selector = (propertiesList[x].selectors).trim();
        var css = (propertiesList[x].css).trim();
        var value = (propertiesList[x].value).trim();
        ;

        if (result[selector] === undefined)
            result[selector] = [];

        if (showEmpty)
            result[selector].push(css + ":" + value + ";");
        else if (value != "")
            result[selector].push(css + ":" + value + ";");

    }
    return result;
}
function ExportGroupedCssPropToString(groupedCSS) {
    var result = "";
    for (var key in groupedCSS) {
        result += key + " {" + "\n";
        for (var x = 0; x < groupedCSS[key].length; x++) {
            result += "\t" + groupedCSS[key][x] + "\n";
        }
        result += "}" + "\n";
    }
    return result;
}

/* Saving CSS*/
function SaveCSS(propertiesList, showEmpty) {
    var result = GetCSS(propertiesList, showEmpty);
    alert(result);
}

</script>


</head>
<body>
<a href="#" onclick="SaveCSS(propertiesList, false)"> Save CSS</a><!--
<a href="#" onclick="ChangeIframeCss()"> Test IFrame</a>
<a href="#" onclick="ApplyTheDefaultCssFromConfig(propertiesList)">Load CSS</a>-->


<div class="tab-frame" id="bi_admin_layout_editor">
    <div class="tab-form">
        <div class="top-content">
            <div class="left-25">
                <div id="tabs">
                    <ul>
                        <li><a href="#div1">Theme Builder</a></li>
                        <li><a href="#div2">Gallery</a></li>
                    </ul>
                    <div id="div1">

                    </div>
                    <div id="div2">
                        <a href="#" id="green_theme">Green Theme</a> <br />
                        <a href="#" id="blue_theme">Blue Theme</a> <br />
                        <a href="#" id="yellow_theme">Yellow Theme</a> <br />
                        <a href="#" id="grey_theme">Grey Theme</a> <br />
                        <a href="#" id="transparent_theme">Alpha Theme</a>
                    </div>

                </div>

            </div>
            <div class="right-75">
                    <span id="previewPane">
                        <iframe id="iframe" height="100%" width="100%"

                                ></iframe>
                    </span>
            </div>
        </div>
    </div>
</div>
</body>
</html>